<template lang="html">
  <div class="xiangqing">
    <div class="head">
      <span @click='back()'>返回</span>
      <div class="title">
        晒单详情
      </div>
    </div>
    <div class="main">
      <shaidan></shaidan>
    </div>
    <div class="foot">
      <div class="product" v-for='info in result.productInfo'>
        <div class="product_img">
          <img :src="info.productImg" alt="">
        </div>
        <div class="product_info">
          <div class="product_name">
            {{ info.productName}}
          </div>
          <div class="product_price">
            {{ '￥' + info.secooPrice }}
          </div>
        </div>
      </div>
      <div @click='buy' class="toBy">
          去购买
      </div>
    </div>
  </div>
</template>

<script>
import shaidan from '../components/shaidan'
export default {
  data() {
    return {
      result: {}
    }
  },
  methods: {
    back() {
      history.back();
    },
    buy() {
      this.$router.push({path:'../pages/toBuy'})
    }
  },
  components: {
    shaidan
  },
  created() {
    this.axios.get('../static/data/xiangqing.json').then(data=> {
      return this.result = data.data.show;
    })
  }
}
</script>

<style lang="css" scoped>
  * {
    margin:0;
    padding: 0;
  }
  .xiangqing {
    width: 100%;
    position: relative;
    background: white;
  }
  .xiangqing>.main {
    padding-left: 0;
  }
  .head {
    width: 100%;
    height: .8rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: .04rem solid #999;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background: white;
  }
  .head span {
    display: inline-block;
    width: 15%;
    font-size: .3rem;
    text-align: center;
  }
  .head .title {
    width: 85%;
    text-align: center;
  }
  .foot {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .foot .product {
    width: 65%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .25rem;
    color: #999;
    background: #f1f0f7;
  }
  .product .product_img {
    width: 30%;
  }
  .product .product_img img {
    width: .65rem;
    height: .65rem;
    margin-left: 10%;
  }
  .product .product_info {
    width: 70%;
  }
  .product .product_info .product_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .foot .toBy {
    width: 35%;
    background: red;
    color: white;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
  }

</style>
